<template>
    <div class="good">
        <my-head :title="$route.query.name"       ></my-head>
        <div v-if="good">
            <img :src="good.img" alt="" class="gimg">
            <van-cell-group class="goodinfo">
                <van-cell title="商品类型" :value="good.type.text"  />
                <van-cell title="商品单价" :value="good.price.toFixed(2)+'元'"  />
                <van-cell title="商品折扣" :value="good.discount+'折'"  />
                <van-cell title="购买数量"    >
                    <template #default>
                        <van-stepper  @change="changevalue" v-model.number="value" min="1" />
                    </template>
                </van-cell>
                <van-cell title="购买小计"  :value="(good.price * value * good.discount/10).toFixed(2) +'元'  "  />
            </van-cell-group>
        </div>
        <div class="bottom">
            <van-goods-action>
                <van-goods-action-icon icon="chat-o" text="评论" dot @click="gotocommentlist" />
                <van-goods-action-icon icon="shop-o" text="收藏" badge="12" />
                <van-goods-action-icon icon="like-o" @click="todoAddLike" :text="likeFlag?'已点赞':'点赞'" :color="likeFlag?'#f50':'#333'" :badge="likeCount" />
                <van-goods-action-icon icon="cart-o" text="购物车"  :badge="cartNum" @click="gotoseecart" />
                <van-goods-action-button type="warning" text="加入购物车"  @click="addToCart" />
                <van-goods-action-button type="danger" text="立即购买"  @click="gotopay" />
            </van-goods-action>
        </div>
    </div>
</template>


<script>
export default {
    data(){
        return {
            good:null, 
            value:1, 
            likeCount:0,
            likeFlag:false, // 假设我没有点赞
        }
    },
    methods:{
        gotopay(){
             this.checkIsLogin(()=>{
                 this.$router.push({
                     name:'pay',
                     query:{
                        amount:this.value * this.good.price *  this.good.discount / 10,
                        ...this.good,
                     }
                 })
             })
        },
        todoAddLike(){
            // 先判断是否登录
            this.checkIsLogin(async ()=>{
                // 点赞 
                // 判断是否点赞 
                let result = await this.$ajax.getLikes({
                    gid:this.$route.params.gid,
                    username:this.userInfo.username,
                })
                if(result.length>0){

                    // 已经点赞
                    // 删除 
                    let res = await this.$ajax.delLikes(result[0].id);
                    this.$toast("你已取消点赞");
                    this.likeFlag = false; 
                    this.likeCount--;

                }else{
                    // 没有点赞 
                    let res = await this.$ajax.addLikes({
                        gid:this.good.id,
                        username:this.userInfo.username,
                        userInfo:this.userInfo,
                        time:new Date(),
                        good:this.good,
                    });
                    this.$toast("点赞成功");
                    this.likeFlag = true; 
                    this.likeCount++;
                }
            })
        },
        gotocommentlist(){
            // [{
            //     id,
            //     gid,
            //     good
            //     text,
            //     userInfo,
            //     time 
            // }]
            this.checkIsLogin(()=>{
                this.$router.push({name:'comment-list',query:{gid:this.good.id }})
            })
        },
        gotoseecart(){
            this.checkIsLogin(()=>{
                this.$router.push({name:'cart'})
            })
        },
        changevalue(v){
            console.log(v)
            if(v<0){
                this.value = 1;
                this.$toast('商品数量必须为大于等于1')
            }
        },
        checkIsLogin(todonext){
            if(this.userInfo){
                todonext()  // 执行下一步的逻辑 
            }else{
                this.$dialog.alert({
                    title: '提示',
                    message: '你还没有登录,请先登录',
                }).then(() => {
                // on close
                    this.$router.push({name:'login',query:{from:'good'}})
                });
            }
        },
        async getCartListAsync(){
            let res = await this.$ajax.getCarts({
                username:this.userInfo.username 
            })
            this.getCartList(res)  // mutations 
        },
        addToCart(){
            this.checkIsLogin(async ()=>{
                // 加入购物车  
                // who username
                // count 1
                // 商品信息   

                // 先判断是否已经添加当前的商品 
                // 有 数量累计加 
                // 没有 直接插入
                let res = await this.$ajax.getCarts({
                    username:this.userInfo.username,
                    goodId:this.good.id,
                })
                if(res.length>0){
                    // 有 数量累计加 
                    let result = await this.$ajax.updateCart(res[0].id,{
                        count:this.value+res[0].count 
                    })
                    this.getCartListAsync()
                    this.ShowSuccess("添加成功")
                }else{
                    // 没有 直接插入
                    let result = await this.$ajax.addCart({
                        time:new Date(),
                        username:this.userInfo.username,
                        userInfo:this.userInfo,
                        goodId:this.good.id,
                        good:this.good,
                        count:this.value 
                    })
                    this.getCartListAsync()
                    this.ShowSuccess("购买成功")
                }
                
            })
        },
        async getGoodOne(){
            let res = await this.$ajax.getGoods({
                id:this.$route.params.gid 
            })
            this.good  = res[0]
        },
        // 获取点赞的次数
        async getLikesCount(){
            let res = await this.$ajax.getLikes({
                gid:this.$route.params.gid 
            })
            console.log(res)
            this.likeCount = res.length;
        },
        // 判断我是否意见点赞了 
        async getISLikeFlag(){
            let res = await this.$ajax.getLikes({
                gid:this.$route.params.gid,
                username:this.userInfo.username,
            })
            console.log(res)
            if(res.length>0){
                this.likeFlag  = true 
            }
        },
    },
    mounted(){
        this.getGoodOne();
        this.getLikesCount()
        // 查询这个商品的点赞次数 
        // gid 
        
        this.getISLikeFlag()
        this.getCartListAsync();
    },
    // activated(){
    //     this.getGoodOne()
    // }
}
</script>

<style lang="scss" scoped>
.good{
    width:100%;
    height:100vh;
    background: #f4f4f4;
    padding-top:46px;
    .gimg{
        width:100%;
        height:256px;
    }
}
</style>